<template>
  <div>
    <el-form :model="form" :inline="true" label-width="80px">
      <el-row>
        <el-col :span="4.5">
          <el-form-item label="选择人员" prop="userId">
            <el-select v-model="form.userId" placeholder="请选择">
              <el-option v-for="item in shouHou" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div class="block" style="margin-left: 20px;">
          <span class="demonstration">选择时间范围</span>
          <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" @click="saveC" :disabled="!form.userId||!this.value1"  :loading="loging">查询</el-button>
        </div>
      </el-row>
    </el-form>
    <div v-if="none">

      <el-table :data="tableData" border style="width: 100%" :header-cell-style="headClass" :cell-style="rowClass">
        <el-table-column prop="XinCheXiaoLiang" label="新车销量" ></el-table-column>
        <el-table-column prop="ChengQuJiaoFuShuLiang" label="城区交付数量"></el-table-column>
        <el-table-column prop="ChengJiaoJiaoFuShuLiang" label="城郊交付数量"></el-table-column>
        <el-table-column prop="QuYuWaiJiaoFuShuLiang" label="区域外交付数量"></el-table-column>
        <el-table-column prop="XinCheChengJiaoLv" label="新车成交率"></el-table-column>
        <el-table-column prop="ChengQuChengJiaoLv" label="城区成交率"></el-table-column>
        <el-table-column prop="ChengJiaoChengJiaoLv" label="城郊成交率"></el-table-column>
        <el-table-column prop="QuYuWaiChengJiaoLv" label="区域外成交率"></el-table-column>
        <el-table-column prop="ZhanTingXianSuo" label="展厅线索量"></el-table-column>
        <el-table-column prop="ZhanTingLiuDangLiang" label="展厅留档量"></el-table-column>
      </el-table>
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="headClass" :cell-style="rowClass">
        <el-table-column prop="XinCheXiaoLiang" label="新车销量" ></el-table-column>
        <el-table-column prop="ChengQuJiaoFuShuLiang" label="城区交付数量"></el-table-column>
        <el-table-column prop="ChengJiaoJiaoFuShuLiang" label="城郊交付数量"></el-table-column>
        <el-table-column prop="QuYuWaiJiaoFuShuLiang" label="区域外交付数量"></el-table-column>
        <el-table-column prop="XinCheChengJiaoLv" label="新车成交率"></el-table-column>
        <el-table-column prop="ChengQuChengJiaoLv" label="城区成交率"></el-table-column>
        <el-table-column prop="ChengJiaoChengJiaoLv" label="城郊成交率"></el-table-column>
        <el-table-column prop="QuYuWaiChengJiaoLv" label="区域外成交率"></el-table-column>
        <el-table-column prop="ZhanTingXianSuo" label="展厅线索量"></el-table-column>
        <el-table-column prop="ZhanTingLiuDangLiang" label="展厅留档量"></el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        none:false,//是否显示页面
        size: 'small',
        loging:false,//开启懒加载（禁止点击）
        value1: null,//日期选择器绑定的值
        form:{
          userId:null,
        },
        shouHou:[],
        tableData:[{}]

      }
    },
    methods:{
      //获得售后部所以人员
      getShouHou(){
         this.$ajax.post('AfterSaleTargetZ2Controller/findShouHou', {}).then(res => {
           var result = res.data
           this.shouHou = result.data
         })
      },
      saveC(){
        console.log('点击了保存');
        this.loging = true
        //开始时间
        var y = this.value1[0].getYear()+1900
        var m = this.value1[0].getMonth()+1
        var d = this.value1[0].getDate()
        var s = this.value1[0].getHours()
        var f = this.value1[0].getMinutes()
        var miao  = this.value1[0].getSeconds()
        var startTime1=y+'-'+m+'-'+d+' '+  s+":"+f+":"+miao
        var startTime=startTime1.toString()
        //结束时间
        var y2 = this.value1[1].getYear()+1900
        var m2 = this.value1[1].getMonth()+1
        var d2 = this.value1[1].getDate()
        var s2 = this.value1[1].getHours()
        var f2 = this.value1[1].getMinutes()
        var miao2  = this.value1[1].getSeconds()
        var endTime1 = y2+'-'+m2+'-'+d2+' '+s2+":"+f2+":"+miao2
        var endTime=endTime1.toString()
        
        
        this.none =true
        setTimeout(()=>{
          this.loging = false
        },2000)
      }
    },
    created() {
      this.getShouHou()
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table__row:hover > td {

      background-color: #ffffff !important;

  }

  .el-table__row--striped:hover > td {

      background-color: #fafafa !important;

  }
  .none{
    display: none;
  }

</style>
